<!--
  图片组件，无图片或加载失败显示图像占位符

  src           ====>     小图
  preview       ====>     预览大图，没有的话，默认使用小图
  width         ====>     图像宽度，如30px
  height        ====>     图像高度，如30px
  borderRadius  ====>     圆角，默认50%

-->
<template>
  <a-image
      :width="width"
      :height="height"
      :src="src"
      :preview="{
          src: preview?preview:src,
        }"
      :style="{
        borderRadius: borderRadius
      }"
      @error="onError"
      fallback=""
  />
</template>

<script setup>
const emit = defineEmits(['error'])
const props = defineProps({
  src: {
    type: String,
    default: ''
  },
  preview: {
    type: String,
    default: ''
  },
  width: {
    type: String,
    default: '40px'
  },
  height: {
    type: String,
    default: '40px'
  },
  borderRadius: {
    type: String,
    default: '50%'
  }
})

const onError = (e) => {
  emit('error',e)
}
</script>

<style scoped>

</style>
